<template>
    <div>
        <div class="tableHeader">
            <div class="tableHeaderTitle">评论列表</div>
            <div class="tableHeaderMenu">
                <el-button-group>
                    <el-button icon="el-icon-refresh" @click="refreshData" size="mini"></el-button>
                </el-button-group>
            </div>
        </div>

        <el-table ref="multipleTable" :data="commentsListData" tooltip-effect="dark" style="width: 100%">
            <el-table-column label="序号" type="index" width="80"></el-table-column>
            <el-table-column>
                <template slot-scope="scope">
                    <div class="commentsListItemBox">
                         <div class="commentsListItemHeader">
                             <img :src="scope.row.cm_header_url" />
                         </div>
                         <div class="commentsListItemName">{{scope.row.cm_nickname}}</div>
                         <div class="commentsListItemContent">{{scope.row.cac_content}}</div>
                         <div class="commentsListItemTime">{{$common.dateFormat("YYYY-MM-dd hh:mm",scope.row.cac_create_time)}}</div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="" fixed="right" width="260">
                <template slot-scope="scope">
                    <el-button type="danger" size="mini" @click="deleteComment(scope.$index,scope.row)">删除评论</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-col :span="24">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagination.currentPage"
                    :page-sizes="[20,50,100,200]"
                    :page-size="pagination.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.dataLength"
            ></el-pagination>
        </el-col>
    </div>
</template>

<script>
    import { mapState,mapMutations } from 'vuex'
    export default {
        //数据源
        data(){
            return {

            }
        },
        //初始化函数
        mounted() {
            //获取文章评论
            this.initCommentData('init');
        },
        //计算属性
        computed: {
            ...mapState({
                commentsListData  : state => state.CommentsListModule.commentsListData,
                pagination : state => state.CommentsListModule.pagination
            })
        },
        //组件方法
        methods: {
            refreshData(){
                this.pagination.skip = 0;
                this.initCommentData('init');     
            },
            initCommentData(type){
                if(type == 'init'){
                    this.$myLoading.startLoading()
                }
                
                this.$http.getHttp(
                    this.$API.easyD_V_CmsArticleCommentInfo + "/skip/" +this.pagination.skip+ "/limit/" +this.pagination.pageSize+ "/cac_caid/"+this.$route.query.ca_id+"/cac_is_delete/0/count/1",
                    rs => {
                        this.$store.commit('CommentsListModule/updateCommentsListData',rs.data)
                        this.$store.commit('CommentsListModule/updatePaginationDataLength',parseInt(rs.count))
                        if(type == 'init'){
                            this.$myLoading.endLoading()
                        }
                        
                    }
                ) 
            },
            deleteComment(index,item){

                var params = {
                    delete_where  : "cac_id",
                    cac_id        : item.cac_id,
                    cac_is_delete : 1
                }

                this.$myPop.confirmBox("确认操作","确定要删除该条评论吗？",()=>{
                    this.$myLoading.startLoading()
                    this.$http.postHttp(
                        this.$API.cmsArticleCommentDelete,
                        params,
                        rs => {
                            this.$myLoading.endLoading()
                            this.$myPop.SuccessMessage()
                            this.initCommentData('update');
                        }
                    )
                })
            },
            handleSizeChange(page) {
                this.pagination.pageSize = page;
                this.initCommentData('init');
            },
            handleCurrentChange(page) {
                this.pagination.skip = (page - 1) * this.pagination.pageSize;
                this.pagination.currentPage = page;
                this.initCommentData('init');

            }
        }
    }
</script>

<style lang="stylus" scoped>
@import '~PUBLIC_CSS';
.commentsListItemBox {
    width 100%
    height auto
    position relative

    .commentsListItemHeader {
        width 40px
        height 40px
        float left

        img {
            width 100%
            height 100%
            border-radius 50%
            object-fit cover
        }
    }

    .commentsListItemName {
        width 200px 
        height 40px
        line-height 40px
        float left
        margin-left 5px
    }

    .commentsListItemContent {
        width 100%
        height auto
        float left
        margin-top 5px
    }

    .commentsListItemTime {
        position absolute
        top 8px
        right 8px
    }
}
</style>